import React from 'react'
import {
    Card,
    Button,
    Drawer,
    Form,
    Input,
    Radio,
    TreeSelect,
    Popconfirm,
    Modal
} from 'antd';
import { EditOutlined } from '@ant-design/icons';
import '../assets/styles/userCenter.less'
import { useRef } from 'react';
import { profileApi, mrbirdApi, avatarApi } from '../apis/users'
import { useSelector, useDispatch } from 'react-redux'

const { TextArea } = Input;

export default function UserCenter() {
    const images = [
        { src: 'http://xawn.f3322.net:8002/distremote/static/avatar/default.jpg', avatar: 'default.jpg' },
        { src: 'http://xawn.f3322.net:8002/distremote/static/avatar/1d22f3e41d284f50b2c8fc32e0788698.jpeg', avatar: '1d22f3e41d284f50b2c8fc32e0788698.jpeg' },
        { src: 'http://xawn.f3322.net:8002/distremote/static/avatar/2dd7a2d09fa94bf8b5c52e5318868b4d9.jpg', avatar: '2dd7a2d09fa94bf8b5c52e5318868b4d9.jpg' },
    ]
    let user = JSON.parse(localStorage.user)
    const [open, setOpen] = React.useState(false);
    const [isModalOpen, setIsModalOpen] = React.useState(false);
    const avatar = useSelector(state=>{
        return state.avatar.avatar
    })
    const dispatch = useDispatch()
    const submitRef = useRef(null)
    const sex = React.useMemo(() => {
        switch (user.ssex) {
            case '0':
                return '男'
            case '1':
                return '女'
            case '2':
                return '保密'
        }
    }, [user.ssex])

    // 修改头像模态框打开和关闭
    function showModal(){
        setIsModalOpen(true);
    };
    function handleCancel(){
        setIsModalOpen(false);
    };

    // 编辑信息抽屉的打开和关闭
    function showDrawer() {
        setOpen(true);
    }
    function onClose() {
        setOpen(false)
    }

    // 提交表单
    function submit() {
        submitRef.current.click()
    }
    function changeAvatar(avatar) {
        avatarApi({ username: user.username, avatar }).then(() => {
            // console.log(res);
            getInfo()
            dispatch({
                type:'avatarModule/changeAvatar',
                payload:avatar
            })
            handleCancel()
            // setIsModalOpen(false)
        })
    }
    const onFinish = (values) => {
        console.log(values);
        profileApi({ ...values, userId: user.userId, roleId: user.roleId, username: user.username, status: user.status })
            .then(() => {
                getInfo()
            })
    }
    function getInfo() {
        mrbirdApi().then(res => {
            console.log(res);
            localStorage.user = JSON.stringify(res)
            onClose()
        })
    }
    return (
        <>
            <Card
                extra={<a href="#" onClick={showDrawer} style={{ color: '#1890ff' }}>编辑资料</a>}
                style={{ width: '100%' }}
                headStyle={{ lineHeight: '50px', }}
                bodyStyle={{ paddingTop: '16px' }}
            >
                <div className='card-box'>
                    <div className='card-left'>
                        <img src={"http://xawn.f3322.net:8002/distremote/static/avatar/" + avatar} alt="" />
                        <Button icon={<EditOutlined />} onClick={showModal}>修改头像</Button>
                    </div>
                    <div className='card-right'>
                        <table>
                            <tbody>
                                <tr>
                                    <td>账户:</td>
                                    <td>{user.username}</td>
                                </tr>
                                <tr>
                                    <td>角色:</td>
                                    <td>{user.roleName || '暂无角色'}</td>
                                </tr>
                                <tr>
                                    <td>性别:</td>
                                    <td>{sex}</td>
                                </tr>
                                <tr>
                                    <td>电话:</td>
                                    <td>{user.mobile}</td>
                                </tr>
                                <tr>
                                    <td>邮箱:</td>
                                    <td>{user.email}</td>
                                </tr>
                                <tr>
                                    <td>部门:</td>
                                    <td>{user.deptName || '暂无部门'}</td>
                                </tr>
                                <tr>
                                    <td>描述:</td>
                                    <td>{user.description}</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>

            </Card>
            <Drawer
                title='编辑资料'
                placement="right"
                onClose={onClose}
                open={open}
                closable={false}
                size={'large'}
                headerStyle={{ fontWeight: '100' }}
                footer={
                    <div>
                        <Popconfirm
                            title="确定是否关闭"
                            onConfirm={onClose}
                            okText="确定"
                            cancelText="取消"
                        >
                            <Button style={{ marginRight: '20px' }}>取消</Button>
                        </Popconfirm>

                        <Button type='primary' onClick={submit}>确定</Button>
                    </div>
                }
                footerStyle={{ textAlign: 'right' }}

            >
                <Form
                    labelCol={{
                        span: 4,
                    }}
                    wrapperCol={{
                        span: 14,
                    }}
                    layout="horizontal"
                    initialValues={{
                        email: user.email,
                        mobile: user.mobile,
                        deptId: user.deptId,
                        ssex: user.ssex,
                        description: user.description
                    }}
                    onFinish={onFinish}
                >
                    <Form.Item label="邮箱" name='email'>
                        <Input />
                    </Form.Item>
                    <Form.Item label="手机" name='mobile'>
                        <Input />
                    </Form.Item>
                    <Form.Item label="部门" name='deptId'>
                        <TreeSelect
                            treeData={[
                                {
                                    title: '开发部',
                                    value: 1,
                                    children: [
                                        {
                                            title: '开发一部',
                                            value: 2,
                                        },
                                        {
                                            title: '开发二部',
                                            value: 3,
                                        },
                                    ],
                                },
                                {
                                    title: '市场部',
                                    value: 4,
                                },
                                {
                                    title: '人事部',
                                    value: 5
                                },
                                {
                                    title: '测试部',
                                    value: 6
                                }
                            ]}
                        />
                    </Form.Item>
                    <Form.Item label='性别' name='ssex'>
                        <Radio.Group>
                            <Radio value="0"> 男 </Radio>
                            <Radio value="1"> 女 </Radio>
                            <Radio value="2"> 保密 </Radio>
                        </Radio.Group>
                    </Form.Item>
                    <Form.Item label='描述' name='description'>
                        <TextArea rows={4} />
                    </Form.Item>
                    <Form.Item>
                        <Button htmlType='submit' ref={submitRef} style={{ display: 'none' }}>提交</Button>
                    </Form.Item>
                </Form>
            </Drawer>

            <Modal title="选择头像" open={isModalOpen} onCancel={handleCancel} footer={null} width={800}>
                <div className='image-box'>
                    {
                        images.map(item => {
                            return <img src={item.src} onClick={() => changeAvatar(item.avatar)} key={item.avatar}></img>
                        })
                    }
                </div>
            </Modal>
        </>
    )
}
